<!DOCTYPE HTML>
<html>
<head>
<!-- Test that before/after generated content stops suppression correctly,
     both statically and dynamically -->
<style>
body > div { border:1px solid black; margin:1em;
             font-family:sans-serif; letter-spacing:2px; }
#d1:before { content:"Hello"; }
#d2:after { content:"Kitty"; }
#d3.c:before { content:"Hello"; }
#d4.c:after { content:"Kitty"; }
</style>
<script>
function loaded() {
  document.body.offsetHeight;
  document.getElementById("d3").setAttribute("class", "c");
  document.getElementById("d4").setAttribute("class", "c");
}
</script>
</head>
<body onload="loaded()">
  <div id="d1"> <span>Kitty</span></div>
  <div id="d2"><span>Hello</span> </div>
  <div id="d3"> <span>Kitty</span></div>
  <div id="d4"><span>Hello</span> </div>
</body>
</html>
